<template>
  <div>
    <div>
      <table>
        <thead>
          欢迎光临章鱼哥西瓜店
        </thead>
        <th>西瓜15￥/斤,折扣 （ 8折 ）</th>
        <tr>
          <td>
            请输入你要购买的斤数 <input type="number" v-model.number="jin" />
          </td>
        </tr>
        <tr>
          <td><button @click="btn(jin)">结账买单</button></td>
        </tr>
        <tr>
          <td>
            结账单:总价:{{ zong }}￥元 折后价:{{ zhe }}￥元 省了:{{ sheng }}￥元
          </td>
        </tr>
      </table>
    </div>
    <hr />
    <div>
      <span v-for="(item, index) in arr" :key="index">
        <input type="checkbox" v-model="select" :value="item" />{{ item }}
      </span>
      <ul>
        <li v-for="(item, index) in select" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jin: 0,
      zong: 0,
      zhe: 0,
      sheng: 0,
      select: [],
      arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
    };
  },
  methods: {
    btn(jin) {
      if (jin < 0) {
        alert("件数不能为负数");
        this.jin = 0;
        return;
      }
      this.zong = jin * 15;
      this.zhe = jin * 15 * 0.8;
      this.sheng = jin * 15 * 0.2;
    },
  },
};
</script>

<style>
p {
  display: block;
  width: 50rem;
  text-align: center;
}
div {
  width: 50rem;
  margin: 6.25rem auto;
}
table {
  text-align: center;
  width: 100%;
  height: 5rem;
  border: 1px solid black;
}
thead,
th,
td {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-width: 0.0625rem !important;
}
</style>